<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getToken } from '@/utils/cookie'
import { likeComment, cancelLikeComment, createComment } from '@/apis/detail'

const props = defineProps({
  comment: {
    type: Object,
    required: true
  },
  level: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['reply', 'like'])

const showReplyForm = ref(false)
const replyContent = ref('')

// 处理点赞（已async）
const handleLike = async () => {
  if (!getToken()) {
    ElMessage.error('请先登录')
    return
  }
  
  try {
    if (props.comment.isLiked) {
      await cancelLikeComment(props.comment.commentId)
      emit('like', {
        commentId: props.comment.commentId,
        isLiked: false,
        likeCount: props.comment.likeCount - 1
      })
    } else {
      await likeComment(props.comment.commentId)
      emit('like', {
        commentId: props.comment.commentId,
        isLiked: true,
        likeCount: props.comment.likeCount + 1
      })
    }
    // 强制刷新评论数据以确保状态同步
    emit('refresh')
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

// 提交回复（已async）
const submitReply = async () => {
  if (!getToken()) {
    ElMessage.error('请先登录')
    return
  }
  
  if (!replyContent.value.trim()) {
    ElMessage.error('回复内容不能为空')
    return
  }
  
  try {
    const newComment = await createComment({
      postId: props.comment.postId,
      parentId: props.comment.commentId,
      content: replyContent.value,
      token: getToken()
    })
    
    emit('reply', {
      parentId: props.comment.commentId,
      comment: {
        ...newComment,
        createTime: new Date().toISOString(),
        children: Array.isArray(newComment.children) ? newComment.children : []
      }
    })
    
    // 触发刷新事件
    emit('refresh')
    
    replyContent.value = ''
    showReplyForm.value = false
    ElMessage.success('回复成功')
  } catch (error) {
    ElMessage.error('回复失败')
  }
}
</script>

<template>
  <div class="comment-item" :style="{ marginLeft: `${level * 20}px` }">
    <div class="header">
      <span class="author">{{ comment.author || comment.nickName }}</span>
      <span class="time">{{ comment.createTime }}</span>
    </div>
    
    <div class="content">
      {{ comment.content }}
    </div>
    
    <div class="actions">
      <button 
        class="like-btn" 
        :class="{ 'liked': comment.isLiked }"
        @click="handleLike"
      >
        {{ comment.isLiked ? '已点赞' : '点赞' }} ({{ comment.likeCount }})
      </button>
      
      <button 
        class="reply-btn" 
        @click="showReplyForm = getToken() ? !showReplyForm : (ElMessage.error('请先登录'), false)"
      >
        回复
      </button>
    </div>
    
    <!-- 回复表单 -->
    <div v-if="showReplyForm" class="reply-form">
      <textarea v-model="replyContent" placeholder="写下你的回复..."></textarea>
      <div class="form-actions">
        <button @click="submitReply">提交</button>
        <button @click="showReplyForm = false">取消</button>
      </div>
    </div>
    
    <!-- 子评论 -->
    <div v-if="comment.children && comment.children.length > 0" class="replies">
      <CommentItem 
        v-for="child in comment.children" 
        :key="child.commentId"
        :comment="child"
        :level="level + 1"
        @reply="emit('reply', $event)"
        @like="emit('like', $event)"
      />
    </div>
  </div>
</template>

<style scoped>
/* 样式保持不变 */
.comment-item {
  margin-bottom: 15px;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 6px;
  transition: all 0.3s;
}

.comment-item:hover {
  background: #f0f0f0;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}

.author {
  font-weight: bold;
  margin-right: 10px;
  color: #333;
}

.time {
  color: #999;
  font-size: 12px;
}

.content {
  margin: 10px 0;
  line-height: 1.6;
  color: #333;
}

.actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.like-btn, .reply-btn {
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.like-btn {
  border: 1px solid #1890ff;
  color: #1890ff;
  background: none;
}

.like-btn:hover {
  background: #e6f7ff;
}

.like-btn.liked {
  background: #1890ff;
  color: white;
}

.like-btn.liked:hover {
  background: #40a9ff;
}

.reply-btn {
  border: 1px solid #666;
  color: #666;
  background: none;
}

.reply-btn:hover {
  background: #f5f5f5;
}

.reply-form {
  margin-top: 15px;
}

.reply-form textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.form-actions button {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.form-actions button:first-child {
  background: #1890ff;
  color: white;
  border: none;
}

.form-actions button:first-child:hover {
  background: #40a9ff;
}

.form-actions button:last-child {
  background: none;
  border: 1px solid #ddd;
}

.form-actions button:last-child:hover {
  background: #f5f5f5;
}

.replies {
  margin-top: 15px;
  border-left: 2px solid #eee;
  padding-left: 15px;
}
</style>